<template>
  <div class="footer w">
    <div class="hr">&nbsp;</div>
    <div class="top">
      <div class="left same">
        <h4>主办方</h4>
        <ul>
          <li>关于我们</li>
          <li>友情链接</li>
          <li>哗哩哗哩周边</li>
          <li>官方认证</li>
          <li>购买须知</li>
          <li>客服中心</li>
          <li>联系我们</li>
          <li>加入我们</li>
          <li></li>
        </ul>
      </div>
      <div class="center same">
        <h4>传送门</h4>
        <ul>
          <li>传送门</li>
          <li>帮助中心</li>
          <li>侵权申诉</li>
          <li>高级弹幕</li>
          <li>活动中心</li>
          <li>活动专题页</li>
        </ul>
      </div>
      <div class="right">
        <div>
          <div class="image down"></div>
          <div class="hover">手机端下载</div>
        </div>
        <div>
          <div class="image xinlang"></div>
          <div class="hover">新浪微博</div>
        </div>
        <div>
          <div class="image weixing"></div>
          <div class="hover">官方微信</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      广电视节目制作经营许可证: (沪)字第1248号 网络文化经营许可证:沪网文1201310480-05号信息网传听节目许可证:0910417互联网(CP案: 沪ICP13002172号-3 沪ICP证: 沪B2-20100043 违法不良信息举报邮箱: hep@bilibili.com 违法不良信息举报电话: 4000233233 转 3 资质证照网上有害信息举报专区:中国互联网违法和不良信息举报中心 P。上海互联网举报中心|12318 全国文化市场举报网站
    </div>
  </div>
</template>
<script>
export default {};
</script>

<style lang="scss" scoped>

.w {
  width: 1100px;
  margin: 0 auto;
}
.hr{
  margin-left: 60px;
  margin-right: 60px;
  border-top: 1px solid #dfdcdc;
}
.top {
  position: relative;
  // border-top: 1px solid #dfdcdc;
  left: -20px;
  display: flex;
  padding-top: 10px;
  & > div {
    width: 400px;
    height: 130px;
  }
  .same {
    float: left;
    h4 {
      font-size: 15px;
      font-weight: 400;
      color: #666;
    }
    ul {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 366px;
      font-size: 14px;
      li {
        cursor: pointer;
        margin-top: 10px;
        width: 122px;
      }
      li:hover {
        color: red;
      }
    }
  }
  .left {
    margin-right: 10px;
  }
  .center {
    padding-left: 50px;
    padding-right: 10px;
    border-left: 1px solid #dfdcdc;
    border-right: 1px solid #dfdcdc;
  }
  .right {
    height: 130px;
    margin-top: 10px;
    margin-left: 30px;
    & > div {
      height: 80px;
      width: 80px;
      text-align: center;
      float: left;
      .image {
        margin: 0 auto;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: greenyellow;
      }
      .down {
        background: red url("../../assets/down.png") no-repeat center/cover;
      }
      .xinlang {
        background: red url("../../assets/xinlang.png") no-repeat center/cover;
      }
      .weixing {
        background: red url("../../assets/weixing.png") no-repeat center/cover;
      }
      .hover:hover {
        color: red;
        cursor: pointer;
      }
    }
  }
}
.bottom{
  text-align: center;
  color: rgb(153, 162, 170);
  font-size: 14px;
  margin-bottom: 30px;
}
</style>